<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4987107_8ky0a1cq4xu.css"
    />
    <style>
      .main {
        background-color: #f5f5f5;
      }
      .main .wrap {
        width: 1226px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;

        font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
          Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
      }
      .main .wrap .home-baner-box {
        width: 100%;
        margin-top: 20px;
      }
      .main .wrap .home-baner-box img {
        width: 100%;
        height: 120px;
        margin-top: 20px;
      }

      .buy {
        width: 100%;
        height: 686px;
        margin-bottom: 8px;
      }

      .buy .top {
        height: 58px;
        line-height: 58px;
      }
      .buy .top .title {
        display: block;
        font-weight: 200;
        font-size: 22px;
        color: #333;
        text-align: left;
      }
      .buy .top .title > .more {
        float: right;
        font-size: 16px;
        color: #424242;
        transition: all 0.5s;
      }

      .buy .top .title > .more > i {
        font-size: 20px;
        color: #b0b0b0;
        transition: all 0.5s;
      }

      .buy .top .title > .more-list {
        float: right;
        font-size: 16px;
        height: 58px;
      }
      .buy .top .title > .more-list li {
        float: left;
        height: 45px;
        margin-left: 20px;
      }

      .more-list-active {
        border-bottom: 3px solid #ff6700;
        color: #ff6700;
        cursor: pointer;
      }

      .buy .top .title > .more:hover i,
      .buy .top .title > .more:hover span {
        color: #ff6a00;
      }

      .buy-mian-box {
        clear: both;
        position: relative;
      }

      .ear-section {
        opacity: 0;
      }

      .cloth-section {
        position: absolute;
        top: 0;
        left: 234px;
        opacity: 1;
      }

      .buy-left {
        float: left;
        width: 234px;
        height: 614px;
        margin-bottom: 14px;
      }

      .buy-left img {
        width: 100%;
        height: 100%;
      }

      .buy-left > .item {
        margin-left: 0;
      }

      .buy-right {
        float: left;
        width: 992px;
        height: 614px;
      }

      .item {
        float: left;
        width: 234px;
        height: 300px;
        margin-bottom: 14px;
        margin-left: 14px;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
      }
      .item img {
        width: 160px;
        height: 160px;
        padding-top: 30px;
      }

      .item .title {
        font-size: 14px;
        margin-top: 20px;
        color: #333;
        line-height: 20px;
      }

      .item .desc {
        font-size: 12px;
        margin: 0 10px 10px;
        /* 显示一行，左右留空间 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #b0b0b0;
      }

      .item .price {
        color: #ff6a00;
        margin-top: 20px;
      }
      .item .price > span {
        font-size: 12px;
        color: #b0b0b0;
        text-decoration: line-through;
      }

      .item:hover,
      .buy-left:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.5s;
      }

      .buy-left-clearboxshadow:hover {
        box-shadow: none;
      }

      .item-last {
        width: 234px;
        height: 300px;
        float: left;
        margin-left: 14px;
        margin-bottom: 14px;
      }

      .item-last li {
        width: 234px;
        height: 143px;
        margin-bottom: 14px;
        background-color: #fff;
        padding-top: 60px;
        transform: all 0.3s linear;
      }

      .item-last li:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.5s;
      }

      .item-last li a {
        display: block;
        width: 234px;
        height: 68px;
        padding-left: 30px;
        padding-right: 30px;
      }
      .item-last li a img {
        width: 80px;
        height: 80px;
        float: right;
        margin-right: 1px;
        margin-top: -10px;
      }

      .item-last li .title-small {
        width: 94px;
        font-size: 14px;
        margin: -10px 110px 5px 3px;
        color: #333;
      }

      .item-last li .price-small {
        width: 94px;
        font-size: 12px;
        margin: 0px 110px 5px 3px;
        color: #ff6700;
      }

      .icon-more {
        float: right;
        width: 48px;
        height: 48px;
      }
      .icon-more i {
        font-size: 30px;
        color: #ff6700;
      }
      .more-text {
        width: 94px;
        margin: -10px 110px 5px 3px;
        font-size: 18px;
        color: #333;
      }

      .more-text span {
        display: block;
        font-size: 12px;
        color: #757575;
        margin-top: 5px;
      }

      /* 固定侧边栏 */

      .right-menu {
        position: fixed;
        border: 1px solid #b0b0b050;
        border-right: none;
        border-bottom: none;
        border-bottom: 0;
        right: 2px;
        top: 360px;
        width: 84px;
        height: 460px;
        background-color: #fff;
        
      }

      .right-menu li,
      .return-top li,
      .return-top li a,
      .right-menu li a {
        display: block;
        width: 84px;
        height: 92px;
        text-align: center;
        color: #757575;
        font-size: 14px;
        cursor: pointer;
      }
      .right-menu li,
      .return-top li{
        border-bottom: 1px solid #b0b0b050;
      }

      .right-menu li a,
      .return-top li a {
        padding-top: 20px;
      }

      .right-menu li a i,
      .return-top li a i {
        font-size: 30px;
      }
      .right-menu li a p,
      .return-top li a p {
        margin-top: 8px;
      }

      .return-top{
        background-color: #fff;
        margin-top: 10px;
      }

      .right-menu li a:hover,
      .return-top li a:hover {
        color: #ff6700;
      }

      .right-menu-hidden{
        display: none;
      }

      

    </style>
  </head>
  <body>
    <div class="main">
      <div class="wrap">
        <div class="home-baner-box">
          <a href="#">
            <img src="./img/main-banner-ad01.webp" alt="" />
          </a>
        </div>

        <div class="buy">
          <div class="top">
            <h2 class="title">
              手机
              <a href="#" class="more">
                <span>查看更多</span>
                <i
                  class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"
                ></i>
              </a>
            </h2>
          </div>
          <div class="buy-mian-box">
            <div class="buy-left">
              <a href="#"><img src="./img/main-banner-buy01.webp" alt="" /></a>
            </div>
            <div class="buy-right">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏ghhhhhhhhhjddddddjjj</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">
                    5999元起
                    <span>1999元</span>
                  </p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="buy">
          <div class="top">
            <h2 class="title">
              智能穿戴

              <ul class="more-list">
                <li class="more-list-active">耳机</li>
                <li class="">穿戴</li>
              </ul>
            </h2>
          </div>
          <div class="buy-mian-box">
            <div class="buy-left">
              <a href="#"><img src="./img/main-banner-buy01.webp" alt="" /></a>
            </div>
            <div class="buy-right ear-section">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏ghhhhhhhhhjddddddjjj</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">
                    5999元起
                    <span>1999元</span>
                  </p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>

              <div class="item-last">
                <ul>
                  <li>
                    <a href="#">
                      <img
                        class="goods-img-small"
                        src="./img/item-last01.webp"
                        alt=""
                      />
                      <p class="title-small">米家电烤箱</p>
                      <p class="price-small">600元起</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="icon-more">
                        <i
                          class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"
                        ></i>
                      </div>
                      <div class="more-text">
                        浏览更多
                        <span>耳机</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="buy-right cloth-section">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">
                    5999元起
                    <span>1999元</span>
                  </p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>

              <div class="item-last">
                <ul>
                  <li>
                    <a href="#">
                      <img
                        class="goods-img-small"
                        src="./img/item-last01.webp"
                        alt=""
                      />
                      <p class="title-small">米家电烤箱</p>
                      <p class="price-small">600元起</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="icon-more">
                        <i
                          class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"
                        ></i>
                      </div>
                      <div class="more-text">
                        浏览更多
                        <span>耳机</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="buy">
          <div class="top">
            <h2 class="title">
              智能穿戴

              <ul class="more-list">
                <li class="more-list-active">耳机</li>
                <li class="">穿戴</li>
              </ul>
            </h2>
          </div>
          <div class="buy-mian-box">
            <div class="buy-left buy-left-clearboxshadow">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏ghhhhhhhhhjddddddjjj</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏ghhhhhhhhhjddddddjjj</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
            </div>
            <div class="buy-right ear-section">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏ghhhhhhhhhjddddddjjj</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">
                    5999元起
                    <span>1999元</span>
                  </p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy02.webp" alt="" />
                  <h3 class="title">Xiaomi MIX Flip 2</h3>
                  <p class="desc">4.01英寸多功能超大外屏</p>
                  <p class="price">5999元起</p>
                </a>
              </div>

              <div class="item-last">
                <ul>
                  <li>
                    <a href="#">
                      <img
                        class="goods-img-small"
                        src="./img/item-last01.webp"
                        alt=""
                      />
                      <p class="title-small">米家电烤箱</p>
                      <p class="price-small">600元起</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="icon-more">
                        <i
                          class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"
                        ></i>
                      </div>
                      <div class="more-text">
                        浏览更多
                        <span>耳机</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="buy-right cloth-section">
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">
                    5999元起
                    <span>1999元</span>
                  </p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <img src="./img/main-banner-buy03.webp" alt="" />
                  <h3 class="title">米家无雾加湿器3[800]</h3>
                  <p class="desc">水润速达，静享舒适</p>
                  <p class="price">5999元起</p>
                </a>
              </div>

              <div class="item-last">
                <ul>
                  <!-- <li>
                    <a href="#">
                      <img
                        class="goods-img-small"
                        src="./img/item-last01.webp"
                        alt=""
                      />
                      <p class="title-small">米家电烤箱</p>
                      <p class="price-small">600元起</p>
                    </a>
                  </li> -->
                  <li>
                    <a href="#">
                      <div class="icon-more">
                        <i
                          class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"
                        ></i>
                      </div>
                      <div class="more-text">
                        浏览更多
                        <span>耳机</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧固定栏 -->
    <div class="right-menu">
      <ul>
        <li>
          <a href="#"
            ><i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>个人中心</p></a
          >
        </li>
        <li>
          <a href="#"
            ><i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>个人中心</p></a
          >
        </li>
        <li>
          <a href="#"
            ><i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>个人中心</p></a
          >
        </li>
        <li>
          <a href="#"
            ><i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>个人中心</p></a
          >
        </li>
        <li>
          <a href="#"
            ><i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>个人中心</p></a
          >
        </li>
      </ul>
      <ul class="return-top right-menu-hidden">
        <li>
          <a href="#">
            <i class="iconfont icon-xiayiyeqianjinchakangengduo-yuankuang"></i>
            <p>回到顶部</p>
          </a>
        </li>
      </ul>
    </div>

    <script src="./index-content.js"></script>
  </body>
</html>
